<template>
  <div>
    <el-button-group>
      <el-button plain icon="el-icon-tickets" @click="handleProcessEdit">完善发展流程</el-button>
      <el-tooltip class="item" effect="dark" content="数据无价，谨慎删除" placement="top-end">
        <el-button plain icon="el-icon-delete" @click="handleDelete">删除</el-button>
      </el-tooltip>
    </el-button-group>
    <el-divider />
    <el-collapse v-model="activeCollapse" :loading="collapseLoading">
      <el-collapse-item name="1">
        <template slot="title">
          <UserItem :userid="FormData.userName" />
          <span>
            <a style="color:#409EFF">{{ '('+FormData.typeInParty+')' }}</a>
          </span>
          <i class="el-icon-user-solid" />
        </template>
        <el-card>
          <el-table v-if="FormData.base" :data="TableData">
            <el-table-column label="性别">
              <template slot-scope="{row}">{{ (row.base.gender-1)?'女':'男' }}</template>
            </el-table-column>
            <el-table-column label="出生年月">
              <template slot-scope="{row}">{{ parseTime(row.base.time_BirthDay,'{y}-{m}-{d}') }}</template>
            </el-table-column>
            <el-table-column prop="time_Work" label="工作时间" />
            <el-table-column label="民族">
              <template slot-scope="{row}">{{ row.base.nation||'' }}</template>
            </el-table-column>
            <el-table-column label="籍贯">
              <template slot-scope="{row}">{{ row.base.hometown }}</template>
            </el-table-column>
            <el-table-column label="文化程度">
              <template slot-scope="{row}">{{ row.base.education||'' }}</template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-collapse-item>
      <el-collapse-item v-for="(element, ind) in targetArray" :key="ind" :name="ind">
        <template slot="title">
          <span>{{ element.alias }}</span>
          <i class="el-icon-caret-bottom" />
        </template>
        <div class="block">
          <el-timeline v-if="currentStep&&currentStep.index">
            <!-- 显示党员发展流程 -->
            <el-timeline-item
              v-for="item in allStepsArray.slice(element.start,element.end)"
              :key="item.id"
              :timestamp="item.index<currentStep.index?(item.record && item.record.create||'未知'):'待办'"
              placement="top"
              :icon="item.index<currentStep.index?'el-icon-circle-check':''"
              :color="item.index<currentStep.index?'#409EFF':'#909399'"
            >
              <el-card
                :body-style="{ 'background-color': item.index<currentStep.index?'':'#F2F6FC' }"
              >
                <el-tooltip placement="right">
                  <div slot="content">
                    <p>历史记录:</p>
                    <div v-if="item.history">
                      <p
                        v-for="( ar, index) in item.history"
                        :key="ar.id"
                        style="margin-left:1rem"
                      >{{ index + '、' + ar.content }}</p>
                    </div>
                    <div v-if="!(item.history)">
                      <p style="margin-left:1rem">没有历史记录</p>
                    </div>
                  </div>
                  <h4 class="timeline-title">{{ item.alias }}</h4>
                </el-tooltip>
                <p
                  class="timeline-content"
                >{{ (Math.sign(currentStep.index-item.index-1)+1)?(item.record && item.record.content || '没有记录'):'待完成' }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-collapse-item>
    </el-collapse>
    <!-- Dialog--提交信息--编辑信息 -->
    <el-dialog
      v-if="dialogProcessForm&&currentStep"
      title="编辑党员发展流程"
      :visible.sync="dialogProcessForm"
      width="75%"
    >
      <el-steps :active="ProcessActive" align-center>
        <el-step
          :title="'步骤'+(FormStepNum+1)"
          :icon="formConfigArray.Icon1"
          :description="allStepsArray[FormStepNum].alias"
        />
        <el-step
          :title="'步骤'+(FormStepNum+2)"
          :icon="formConfigArray.Icon2"
          :description="allStepsArray[FormStepNum+1].alias"
        />
        <el-step
          :title="'步骤'+(FormStepNum+3)"
          :icon="formConfigArray.Icon3"
          :description="allStepsArray[FormStepNum+2].alias"
        />
      </el-steps>
      <el-form v-model="Process_form" style="margin-top:1rem;">
        <el-form-item v-if="!endFlag">
          <template slot="label">
            {{ allStepsArray[stepNum].alias }}
            <el-tag v-if="stepNum === currentStep.index">当前流程</el-tag>
          </template>
          <el-input
            v-model="Process_form.content"
            type="textarea"
            :placeholder="allStepsArray[stepNum].description"
          />
        </el-form-item>
      </el-form>
      <el-button-group>
        <el-button :disabled="startFlag" @click="lastProcess">{{ formConfigArray.lastReminder }}</el-button>
        <el-button
          :disabled="stepNum > currentStep.index"
          plain
          :loading="submitLoading"
          @click="submitProcess(Process_form)"
        >{{ submitLoading?'提交中...':'提交' }}</el-button>
        <el-button :disabled="endFlag" @click="nextProcess">{{ formConfigArray.nextReminder }}</el-button>
      </el-button-group>
    </el-dialog>
  </div>
</template>
<script>
import { parseTime } from '@/utils'
import { allSteps, submit, history, info } from '@/api/zzxt/party-join'
import { getUserBase } from '@/api/user/userinfo'
export default {
  name: 'DyfzMember',
  components: {
    UserItem: () => import('@/components/User/UserFormItem')
  },
  data: () => ({
    collapseLoading: false,
    submitLoading: false,
    allStepsArray: [],
    allStepsNum: 0,
    currentStep: { index: 0 },
    activeCollapse: [0, '1'],
    FormData: {},
    InfoTitle: '',
    TableData: [],
    dialogProcessForm: false,
    Process_form: {},
    stepNum: 0,
    processData: {},
    target: {
      8: { alias: '入党积极分子发展流程', start: 0, end: 0 },
      16: { alias: '党员发展对象考察情况', start: 0, end: 0 },
      32: { alias: '发展为预备党员', start: 0, end: 0 },
      64: { alias: '党员转正', start: 0, end: 0 }
    }
  }),
  computed: {
    targetArray() {
      const ar = []
      for (let i = 0; i < 4; i++) ar[i] = this.target[8 * Math.pow(2, i)]
      return ar
    },
    startFlag() {
      return this.stepNum === 0
    },
    endFlag() {
      return this.stepNum === this.allStepsNum - 2
    },
    ProcessActive() {
      if (this.startFlag) return 1
      if (this.endFlag) return 3
      return 2
    },
    FormStepNum() {
      if (this.stepNum === 0) return 0
      return this.stepNum - 1
    },
    formConfigArray() {
      const arr = {
        Icon1: 'el-icon-d-arrow-right',
        Icon2: 'el-icon-d-arrow-right',
        Icon3: 'el-icon-d-arrow-right',
        nextReminder: '下一步',
        lastReminder: '上一步'
      }
      if (this.startFlag) arr.Icon1 = 'el-icon-loading'
      if (this.endFlag) {
        arr.Icon3 = 'el-icon-loading'
        arr.nextReminder = '完成'
      }
      if (!(this.endFlag || this.endFlag)) arr.Icon2 = 'el-icon-loading'
      return arr
    }
  },
  mounted() {
    this.collapseLoading = true
    this.FormData = this.$route.params.TableData
    if (this.FormData === undefined) {
      this.FormData = JSON.parse(localStorage.getItem('DyfzFormData'))
    }
    localStorage.setItem('DyfzFormData', JSON.stringify(this.FormData))
    const id = this.FormData.name
    getUserBase(id).then(data => {
      this.FormData.base = data.base
    })
    this.TableData.push(this.FormData)
    this.stepNum = this.getStepNum()
    this.init()
  },
  methods: {
    parseTime,
    init() {
      allSteps().then(data => {
        this.allStepsArray = data.list.map((i, index) => {
          i.index = index
          i.content = ''
          return i
        })
        data.list.forEach(item => {
          this.processData[item.id] = item
          if (item.target === 0) return
          const index = data.list.indexOf(item) + 1
          this.target[item.target].end = index
          if (item.target === 64) return
          this.target[item.target * 2].start = index
        })
        this.allStepsNum = data.list.length
        this.allStepsArray[this.allStepsNum++] = { id: '21', alias: '完成' }
        this.refresh()
      })
    },
    refresh() {
      history({ userid: this.FormData.userName }).then(data => {
        data.list.forEach(item => {
          const obj = this.processData[item.stepId]
          if (obj.record !== undefined) {
            if (obj.history === undefined) obj.history = []
            obj.history.push(obj.record)
          }
          obj.record = item
          obj.content = item.content
        })
        this.collapseLoading = false
      })
      info({ userid: this.FormData.userName }).then(data => {
        if (data.model.isCompleteFlow) {
          const l = this.allStepsArray.length
          this.currentStep.index = l
          this.stepNum = l
          return
        }
        this.currentStep = this.allStepsArray.find(item => {
          return item.id === data.model.currentStepId
        })
        this.currentStep.index = this.allStepsArray.indexOf(this.currentStep)
        this.stepNum = this.allStepsArray.indexOf(this.currentStep)
      })
    },
    handleProcessEdit() {
      this.Process_form = this.allStepsArray[this.stepNum]
      this.dialogProcessForm = true
    },
    handleDelete() {
      this.loading = true
      this.$confirm('确认删除？').then(_ => {
        this.$message.success('功能实现中......')
      })
      this.loading = false
    },
    lastProcess() {
      this.stepNum = (this.stepNum - 1) % (this.allStepsNum - 1)
      this.Process_form = this.allStepsArray[this.stepNum]
    },
    nextProcess() {
      this.stepNum = (this.stepNum + 1) % (this.allStepsNum - 1)
      this.Process_form = this.allStepsArray[this.stepNum]
    },
    submitProcess(form) {
      this.submitLoading = true
      const user = this.FormData.userName
      const data = {
        content: form.content,
        status: 1
      }
      if (form.index !== this.currentStep.index) data.id = form.record.id
      submit(Object.assign({ user, data })).then(data => {
        setTimeout(() => {
          this.$message.success(form.alias + '提交成功')
          this.submitLoading = false
          this.refresh()
        }, 2000)
        this.nextProcess()
      })
    },
    getStepNum() {
      return 0
    },
    ArrayCout(ar) {
      let re = ''
      ar.forEach((item, index) => {
        re += index + '、' + item.content + '<br>'
      })
      return re
    }
  }
}
</script>
<style scoped>
.timeline-title {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-size: 14px;
  list-style: none;
  font-weight: 550;
  color: #1f2f3d;
  display: block;
  margin-block-start: 1.33em;
  margin-block-end: 1.33em;
}
.timeline-content {
  font-size: 14px;
  color: #5e6d82;
  line-height: 1.5em;
}
</style>
